<template>
  <div id="app">
    <transition :name="Animate">
      <keep-alive :include="include">
        <router-view></router-view>
      </keep-alive>
    </transition>
    <page-tabbar :active="Color" v-show="showTab"></page-tabbar>
  </div>
</template>

<script>
import PageTabbar from './components/Common/Tabbar/Index'
import { mapState } from 'vuex'
export default {
  name: 'App',
  components: {
    PageTabbar
  },
  data() {
    return {
      include: [
        "PageIndex"
      ]
    }
  },
  computed: {
    ...mapState(['Animate']),
    showTab() {
      let tabRoutes = ['/','/release','/collect','/mine']
      return tabRoutes.indexOf(this.$route.path) != -1 ? true : false
    },
    Color() {
      return this.$store.state.colorItem[this.$store.state.colorIndex].color
    }
  }
}
</script>

<style>
@import "./assets/fonts/font.css";
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,body{
  font-size:50px;
  font-family:  'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'xiaomi','Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}
::-webkit-scrollbar {
     width: 0 !important;
   }
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }
button{
  outline:none;
}
.turn-on-enter {
  transform: translate3d(100%, 0, 0);
}
.turn-on-enter-active,
.turn-on-leave-active {
  transition: transform 0.4s ease;
}
.turn-off-leave-to {
  transform: translate3d(100%, 0, 0);
}
.turn-off-enter-active,
.turn-off-leave-active {
  transition: transform 0.4s ease;
}
.turn-off-leave-active {
  z-index: 2;
}
</style>
